.Guidance {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image: url("./assets/background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  .Guidance-fixed {
    position: fixed;
    bottom: 5%;
    right: 5%;
    color: var(--white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;

    &:hover {
      svg{
        color: var(--gold-40);
      }
    }

    svg {
      width: 2rem;
    }
  }

  .Guidance-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100%;
    max-width: 100vh;

    > h1:nth-child(1) {
      writing-mode: vertical-rl;
      letter-spacing: 2cqmin;
      margin-bottom: 2cqmin;
      font-size: 8cqmin;
    }

    h1 {
      font-weight: bold;
      color: #87ceeb;
      text-shadow: 1px -1px #fff, -1px 1px #999, -10px 10px 5px #80808080;
    }

    > h1:nth-child(2) {
      width: 40%;
      display: flex;
      justify-content: space-between;
      color: #94eb87;
      text-shadow: 0 0 20px rgba(135, 235, 148, 0.8);
      animation-delay: 0.3s;
      font-size: 5cqmin;
    }

    img {
      width: 20%;
      margin: 5% 0;
      animation-delay: 0.6s;
    }

    .z-button {
      width: 30%;
      margin-bottom: 5%;
      animation-delay: 0.9s;
    }

    .today_visitors {
      animation-delay: 1.2s;
    }

    p {
      font-size: 3cqmin;
    }
  }

  /* 添加动画样式 */
  .fade-in {
    opacity: 0;
    transform: translateY(50%);
    animation: fadeIn 0.5s ease-in forwards;
  }

  .slide-in {
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 1s ease-in forwards;
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  @keyframes slideIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

}